<template>
    <div>
      <el-row>
        <el-col :span="6">
          <div>
            启用此配置：<br />
            <el-switch v-model="enabled" inline-prompt active-text="" inactive-text="" />
          </div>
        </el-col>
        <el-col :span="24">
        <!-- <el-col :span="18"> -->
          <draggable :class="{ 'not-draggable-wrapper': !enabled }" :list="list" :disabled="!enabled" item-key="label" class="list-group" ghost-class="ghost"
            :move="checkMove" @start="dragging = true" @end="dragging = false">
            <template #item="{ element }">
              
              <div class="list-group-item" :class="{ 'not-draggable': !enabled }">
                <el-checkbox v-model="element.checked" :label="element.label"></el-checkbox>
                <!-- {{ element.label }} -->
              </div>
            </template>
          </draggable>
        </el-col>
      </el-row>
      
  
  
  
  
  
      
  
  
     
  
    </div>
  
  
    
  
  </template>
  
  <script>
    export default {
      setup() {
  
  
        //  帮助文档:https://github.com/SortableJS/vue.draggable.next 
  
        require('./x-demo-draggable.m.css')
  
  
        let configArr = '报警时间 变量 报警值 限值 类型 描述 恢复时间 恢复值 确认时间 状态'.split(' ').map((s, idx) => ({
          label: s,
          checked:true,
          id: s
        }));


        let res={
            enabled:ref(true),
            list:ref(JSON.parse(JSON.stringify(configArr)))
        }

        // let res= window.parent.APP_CONFIG.setMfcConf(parent.APP_CONFIG.getMfcConf({
        //   tableColumnConfig: {
        //     enabled: true,
        //     // dragging: ref(false),
        //     // checkMove: function (e) {
        //     //   window.console.log("Future index: " + e.draggedContext.futureIndex);
        //     // },
        //     list: JSON.parse(JSON.stringify(configArr)),
        //     // historyFields:JSON.parse(JSON.stringify(configArr)),
        //   }
        // }))
        res.dragging=ref(false)
  
        // debugger;
        return res;
  
  
      }
    }    
  </script>